import React, { useEffect } from 'react';
import './ImagePreview.css';

interface ImagePreviewProps {
  imageUrl: string;
  filename: string;
  timestamp: Date;
  onClose: () => void;
  onCopy: () => void;
  onSave: () => void;
  onDelete: () => void;
}

const ImagePreview: React.FC<ImagePreviewProps> = ({
  imageUrl,
  filename,
  timestamp,
  onClose,
  onCopy,
  onSave,
  onDelete
}) => {
  // 监听键盘事件
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [onClose]);
  return (
    <div className="image-preview-overlay" onClick={onClose}>
      <div className="image-preview-modal" onClick={(e) => e.stopPropagation()}>
        <div className="image-preview-header">
          <div className="image-info">
            <h3>{filename}</h3>
            <span className="preview-timestamp">{timestamp.toLocaleString()}</span>
          </div>
          <button className="close-btn" onClick={onClose}>
            ✕
          </button>
        </div>
        
        <div className="image-preview-content">
          <img 
            src={imageUrl} 
            alt={filename}
            className="preview-image"
          />
        </div>
        
        <div className="image-preview-actions">
          <button className="btn-primary" onClick={onCopy}>
            📋 复制到剪贴板
          </button>
          <button className="btn-secondary" onClick={onSave}>
            💾 重新保存
          </button>
          <button className="btn-danger" onClick={onDelete}>
            🗑️ 删除
          </button>
        </div>
      </div>
    </div>
  );
};

export default ImagePreview;